<template>
	<view class="contant" :style="{'height':height+'px'}">
		<view class="rowsb" style="padding: 20rpx 50rpx;border-bottom: 3rpx solid #F1F1F1;">
			<view @click="selectb(index)" :class="selecta==index?'selectc' : ''" class="nav_adsgfg" v-for="(item,index) in navBottom"
			 :key="index">{{item}}</view>
		</view>
		<view class="quan" v-for="(item,index) in 3" :key="index" v-if="selecta=='0'">
			<view class="q2" >
				<view class="s1">
					<text class="a">￥</text>
					<text class="b">100</text>
				</view>
				<view class="s2">
					满128可用
				</view>
			</view>
			<view class="q1">
				<view class="t1">
					<view class="a">酒店优惠券</view>
					<view class="b">仅住宿优惠</view>
				</view>
				<view class="t2">2019-08-25-2019-09-12</view>
				<view class="t3">
					<button type="default">立即使用</button>
				</view>
			</view>
		</view>
		<view class="quan" v-for="(item,index) in 3" :key="index" v-if="selecta=='1'">
			<view class="q2" :class="selecta=='1'?'hui':''">
				<view class="s1">
					<text class="a">￥</text>
					<text class="b">100</text>
				</view>
				<view class="s2">
					满128可用
				</view>
			</view>
			<view class="q1">
				<view class="t1">
					<view class="a" :style="selecta=='1'?'background-color: #ABABAB;':''">酒店优惠券</view>
					<view class="b">仅住宿优惠</view>
				</view>
				<view class="t2">2019-08-25-2019-09-12</view>
				<view class="t3">
					<text>已使用</text>
				</view>
			</view>
		</view>
		<view class="quan" v-for="(item,index) in 3" :key="index" v-if="selecta=='2'">
			<view class="q2" :class="selecta=='2'?'hui':''">
				<view class="s1">
					<text class="a">￥</text>
					<text class="b">100</text>
				</view>
				<view class="s2">
					满128可用
				</view>
			</view>
			<view class="q1">
				<view class="t1">
					<view class="a" :style="selecta=='2'?'background-color: #ABABAB;':''">酒店优惠券</view>
					<view class="b">仅住宿优惠</view>
				</view>
				<view class="t2">2019-08-25-2019-09-12</view>
				<view class="t3">
					<text>已过期</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	export default{
		data(){
			return{
				height:0,
				selecta: 0, //底部导航栏
				navBottom: ['未使用', '已使用', '已过期'],
			}
		},
		onReady() {
			this.height = uni.getSystemInfoSync().windowHeight;
		},
		methods:{
			selectb(event) { //底部导航栏点击
				if (this.selecta == event) return false
				this.selecta = event
			},
			
		}
	}
</script>

<style lang="scss">
	.contant{
		background-color: #F0F3F6;
		// height: 1334rpx;
	}
	.quan{
		width: 700rpx;
		height: 220rpx;
		margin-bottom: 25rpx;
		background-color: #FFFFFF;
		display: flex;
		margin: 25rpx;
	}
	.q1{
		width: 450rpx;height: 220rpx;
		padding: 25rpx;
	}
	.q1>.t1{
		font-size: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	.t1>.a{
		color: #FFFFFF;
		padding: 8rpx 10rpx;
		background-color: #E51C23;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}
	.q1>.t2{
		// color: #ACACAC;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	.q1>.t3{
		text-align: end;
	}
	.q1>.t3>text{
		font-size: 26rpx;
		
	}
	.q1>.t3>button{
		width: 160rpx;height: 55rpx;
		border-radius: 25rpx;
		font-size: 30rpx;
		line-height: 55rpx;
		margin: 0 0 0 250rpx;padding: 0;
		border: 1rpx solid #D3D3D3;
	}
	.q2{
		width: 250rpx;height: 220rpx;
		text-align: center;
		background-color: #FF9300;
	}
	
	.q2>.s1,.q2>.s2{
		color: #FFFFFF;
		font-size: 26rpx;
	}
	.q2>.s1{
		margin-top: 35rpx;
		// margin-left: 25rpx;
	}
	.q2>.s1>.a{
		font-size: 30rpx;
	}
	.q2>.s1>.b{
		font-size: 44rpx;
	}
	.q2>.s2{
		// margin-left: 68rpx;
		font-size: 32rpx;
		margin-top: 25rpx;
	}
	.hui{
		background-color: #ABABAB;
		color: #FFFFFF;
	}
	.nav_adsgfg {
		color: #BBBBBB;
		font-size: 26rpx;
		font-weight: bold;
	}
	.selectc {
		color: #333;
		font-size: 28rpx;
		font-weight: bold;
		// border-bottom: 8rpx solid #86C133;
	}
	.rowsb{
		font-size: 34rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
	}
</style>

